<template>
    <div>
        <button @click="showModal = true">点击出现模态框</button>
        <Modal :showModal="showModal" @close="showModal=false">
            <h3 slot="header">
                h3头部
            </h3>
            <div slot="body">
                <input type="text" placeholder="请输入账号">
                <br>
                <input type="text" placeholder="请输入密码">
            </div>
            <div slot="footer">
                尾部
            </div>
        </Modal>

        <div class="wrap">
            <div class="con">
                <div class="con2">

                </div>
            </div>
        </div>
        <div class="wrap2">
            <div class="cc2"></div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            showModal:false
        }
    }
}
</script>
<style lang="scss" scoped>
    .wrap{
        width: 100px;
        height: 50px;
        border: 1px solid;
        display: table;
    }
    
    .con{
        display: table-cell;
        vertical-align: middle;
        border: 1px solid blue;
    }
    .con2{
        width: 50px;
        height: 20px;
        border: 1px solid red;
        margin: auto;
    }
    .wrap2{
        width: 100px;
        height: 50px;
        border: 1px solid;
        text-align: center;
    }
    .wrap2:after{
        content: "";
        height: 50px;
        vertical-align: middle;
        display: inline-block;
    }
    .cc2{
        width: 50px;
        height: 20px;
        border: 1px solid red;
        vertical-align: middle;
        display: inline-block;
    }
</style>
